import useMixRef from "@/hooks/useMixRef";
import useRipple from "./useRipple";

export default function RippleButton({
  rippleColor,
  ref,
  ...props
}: React.DetailedHTMLProps<
  React.ButtonHTMLAttributes<HTMLButtonElement>,
  HTMLButtonElement
> & {
  rippleColor?: React.CSSProperties["color"];
}) {
  const ripple = useRipple({
    color: rippleColor,
  });
  const mixRef = useMixRef([ref, ripple]);
  return <button {...props} ref={mixRef} />;
}
